
<template>
    <div class="question-list clear-both" @click.stop="jumpDetail"> 
        <div class="header">
            <div  class="header-img" @click.stop="jumpUserDetail(dataItem)"> 
                <!-- <image-loader :src="" width="100%" height="100%" image-style="border-radius:50%;"></image-loader> -->
                <image mode="aspectFill" :src="dataItem.author_head?dataItem.author_head+'?x-oss-process=image/resize,w_100':'/static/image/user.png'" style="width:100%;height:100%;border-radius:50%;"></image>
            </div>
            <div  class="header-text" @click.stop="jumpDetail(dataItem)">
                <div class="name">
                    {{dataItem.author_name?dataItem.author_name:'xxx'}}
                    <img src="/static/image/guanfang-vip.png" alt="" style="width:48rpx;height:28rpx;margin-left:12rpx;vertical-align: middle;" v-if="dataItem.role==3">
                </div>
                <div class="date">{{dataItem.create_time}}</div>
            </div> 
        </div> 
        <div class="q_right">
            <div class="title">
                <image src="/static/image/questions.png" class="q_icon"></image>{{dataItem.title}}
            </div> 
            <div class="content-text" v-if="dataItem.first_comment">{{dataItem.first_comment}}</div>
            <!-- <div class="content-text" v-if="dataItem.second_comment">{{dataItem.second_comment}}</div>
            <div class="content-text" v-if="dataItem.third_comment">{{dataItem.third_comment}}</div> -->
            <div class="topic-box" v-if="dataItem.topic&&dataItem.topic!=' '">
                <div class="float-left" @click.stop="jumpTopic">
                    <image src="/static/image/hash-hover.png" class="hash-icon"></image>
                    <span class="topic">{{dataItem.topic}}</span>
                </div> 
            </div>       
        </div> 
        <!-- 底部操作按钮 -->                                                           
        <!-- <div class="operation">  
            <div class="good-item" @click.stop="thumb(dataItem)">
                <image :src="dataItem.is_like?'/static/image/good-active.png':'/static/image/good.png'" class="img" :class="{'good-img':goodShow}"></image>
                <span class="num">{{dataItem.like_cnt}}</span>
            </div> 
            <div class="leave-word text-center" @click.stop="jumpDetail">
                <image src="/static/image/leave-word.png" class="img"></image>
                <span class="num">{{dataItem.reply_cnt}}</span>
            </div> 
            <div class="share text-right"  @click.stop="shareItem(dataItem)"> 
                <button  class="text-right share-btn">
                    <image src="/static/image/news-share.png" class="img"></image> 
                </button> 
            </div>  
        </div> -->

        <div class="operation two-gourp" >   
            <div class="good-item text-right" @click.stop="thumb(dataItem)">
                <image :src="dataItem.is_like?'/static/image/good-active.png':'/static/image/good.png'" class="img" :class="{'good-img':goodShow}"></image>
                <span class="num">{{dataItem.like_cnt}}</span>
            </div>
            <div class="leave-word text-left" @click.stop="jumpDetail">
                <image src="/static/image/leave-word.png" class="img"></image>
                <span class="num">{{dataItem.reply_cnt}}</span>
            </div>  
        </div>

    </div> 
</template>

<script>
import * as api from '@/utils/api' ; 
import {baseUrl} from '@/utils/config' ;   
const app = getApp();
export default {
    props: {  
        dataItem:{
            default:{},   
            type:Object
        }, 
    }, 
    data(){
        return {  
            goodShow:false,

        }
    }, 
    watch:{
        dataItem(newName, oldName){ 
            if(this.dataItem.create_at){  
                this.dataItem.create_time=this.getDateDiff(this.dataItem.create_at);
            } 
        },
    },
    mounted() { 
         if(this.dataItem.create_at){  
            this.dataItem.create_time=this.getDateDiff(this.dataItem.create_at);
        } 
    },
    methods:{
        jumpDetail(){
            this.$emit('jumpDetail',this.dataItem);  
        },
        jumpUserDetail(){
            this.$emit('jumpUserDetail',this.dataItem);  
        },
        jumpTopic(){
            this.$emit('jumpTopic',this.dataItem);  
        },
        // 点赞
        thumb(item){
            let vm =this; 
            if(wx.getStorageSync('refresh_token')&&wx.getStorageSync('token')&&wx.getStorageSync('is_tourist')==2){
                app.aldstat.sendEvent('news:点赞');
                
                if(!vm.goodShow){  
                    // vm.$emit('thumb',item); 
                    if(!item.is_like){
                        vm.goodShow=true;  
                        let ctime=setTimeout(()=>{
                            vm.goodShow=false;  
                            clearTimeout(ctime);
                        },200) 
                    } 
                    api.postArtLike({
                        article_id:item.art_id,
                        is_like:item.is_like?0:1
                    }).then(res=>{
                        if(res.data.code==300000){
                            item.is_like=!item.is_like;
                            item.is_like?item.like_cnt++:item.like_cnt--;
                        }
                    })
                } 
            } else {    
                this.$emit('isLogin',item); 
            } 
        }, 
        //分享
        shareItem(item){  
            this.$emit('share',item)  
        },
    }
}
</script>

<style scoped lang="scss">
.question-list{
    width:100%; 
    background:#fff;
    margin-bottom:10rpx; 
    padding:34rpx 36rpx 0 36rpx ; 
    .header{
        width:100%;
        height:65rpx;  
        display: flex;
        align-items:center;
        justify-content: center;
        .header-img{
            flex:0 0 64rpx;
            height:64rpx;
            // .img{
            //     width:100%;
            //     height:100%;
            //     border-radius:50%;
            // }
        }
        .header-text{
            flex:1; 
            .name{
                font-size:30rpx;
                color:#354052;
                padding:0 16rpx;
            }
            .date{
                padding:0 16rpx;
                font-size:20rpx;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:#A1A7AE;
            }
        }
 
    }
    .q_right{ 
        font-family: PingFangSC-Regular, sans-serif;
        font-weight:400;
        margin-top:24rpx;
        .q_icon{
            width:32rpx;
            height:32rpx;  
            vertical-align: middle;
            margin-right:14rpx;
            margin-top: -8rpx;
        }
        .title{
            font-size:32rpx; 
            color:rgba(29,36,56,1);
            padding-right:32rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
 
        }
        .content-text{
            min-height: 80rpx;
            font-size:28rpx; 
            color:rgba(128,136,146,1);
            margin-top:26rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;

        }
        .topic-box{
            height:48rpx;
            padding-right:44rpx;
            .hash-icon{
                width:24rpx;
                height:24rpx;
                vertical-align: middle;
            }
            .topic{
                font-size:28rpx; 
                color:rgba(128,136,146,1);
                margin-left:12rpx;
            }
            .visitor{
                margin-top:16rpx;
                font-size:22rpx; 
                color:rgba(187,190,194,1);
            }
        }
    }

    .operation{ 
        // height:96rpx;
        height:76rpx;
        margin-top:18rpx; 
        border-top:1rpx solid #F1F3F6;
        display: flex;
        align-items: center;
        justify-content: center;
        // .box{
            .good-item{
                flex:1;
            //    display:inline-block;
                padding:10rpx 10rpx 10rpx 76rpx;
                .img{
                    width:40rpx;
                    height:40rpx;
                    vertical-align: middle; 
                    transform: rotate(0deg) scale(1) !important;
                    transition: transform .2s !important;
                }
                .good-img{ 
                    transform: rotate(-15deg) scale(1.1) !important;
                    transition: transform .2s !important;
                }
            } 
            .leave-word{
                flex:1;
            //    display:inline-block;
            //    margin-left:78rpx;
                padding:10rpx 30rpx 10rpx 30rpx;
                &:active{
                    transform:scale(1.1) ;
                    transition: transform .1s ;
                }
                .img{
                    width:42rpx;
                    height:38rpx;
                    vertical-align: middle;
                }
            }
            .share{
                flex:1; 
                padding-right:76rpx; 
                .share-btn{
                    margin-left:0;
                    padding:0;
                    background:transparent;
                    border:0;
                    border-radius:0;
                    &:active{ 
                        transform:scale(1.1);
                        transition: transform .1s ;
                    }
                }
                .img{
                    width:36rpx;
                    height:36rpx;
                    vertical-align: middle;
                }
            }
            .detail-share{
                padding-right:0;  
                .share-btn{
                    width:172rpx;
                    height:64rpx;
                }
                .share-icon-img{
                    width:172rpx;
                    height:64rpx;
                }
            }
            .num{
                font-size:24rpx;
                font-family:Helvetica;
                color:#808892;
                margin-left:20rpx;
            } 
        // }
        // &::after {
        //     width:100%; 
        //     content: " ";
        //     height: 1px;
        //     border-top: 1px solid #ededed;
        //     color: #D9D9D9;
        //     -webkit-transform-origin: 0 0;
        //     transform-origin: 0 0;
        //     -webkit-transform: scaleY(0.5);
        //     transform: scaleY(0.5); 
        // }
    }
    .two-gourp{
        .good-item{
            padding:10rpx 39rpx 10rpx 0;
        }
        .leave-word{
            padding:10rpx 0 10rpx 39rpx;
        }
    }

}  


</style>
